<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="JQuery/jquery-3.7.1.js"></script>
		<style type="text/css">
			.text{background:red;}
			.text2{background:blue;}
		</style>
		<script>
			$(document).ready(function() {
					// (1) 设置“兰花”列表项背景颜色为灰色，文字颜色为红色
					$("li:contains('兰花')").css({
						"background-color": "gray",
						"color": "red"
					});
				 // (2) 给序号为偶数的列表项设置背景颜色为蓝色
				    $("ul li:nth-child(even)").css("background-color", "blue");
				
				    // (3) 移除掉“梅花”列表项中使用的样式类（即名为“text2”）
				    $("li.text2").removeClass("text2");
				
				    // (4) 在ul前增加一个文字段落，其中文字内容为“校园花卉一览表”
				    $("ul").before("<p>校园花卉一览表</p>");
				
				    // (5) 设置添加的文字段落的class类名为“text”
				    $("ul").prev("p").addClass("text");
				
				    // (6) 在ul后增加一个有序列表（ol）
				    $("ul").after("<ol></ol>");
				
				    // (7) 在有序列表（ol）中增加一个列表项，使用两种不同方法：
				    // 方法一：直接append一个新的<li>
				    $("ol").append("<li>新增列表项 1</li>");
				    
				    // 方法二：创建<li>元素并使用appendTo方法
				    $("<li>新增列表项 2</li>").appendTo("ol");
				
				    // (8) 将ul中最后一个列表项复制到有序列表（ol）中原所有列表项之后
				    $("ul li:last").clone().appendTo("ol");
				});
		</script>

	</head>
	<body>
		<ul>
		<li>桂花</li>
		        <li class="text2">梅花</li>
		<li>菊花</li>
		<li>兰花</li>
		</ul>
	</body>
</html>